<template>
  <view class="container">
    <view class="main">
      <view class="time">
        {{ time }}
      </view>
      <view class="operate">
        <button
          :disabled="!allowStop"
          class="button"
          @click="handlerSwitchClick"
          plain
          type="primary"
        >
          <span v-show="playing">暂停</span>
          <span v-show="!playing">开始</span>
        </button>
        <button
          :disabled="playing"
          class="button"
          @click="handlerConfigClick"
          plain
          type="primary"
        >
          设置
        </button>
      </view>
    </view>
  </view>
</template>

<script>
import { formatTime } from "../../../utils/date";
export default {
  name: "detail",
  created() {
    if (this.playing) {
      this.startClock();
    }
  },
  data() {
    return {
      timer: 0,
      target_timestamp: 1000 * 60 * 30,
      now_timestamp: 0,
      playing: false,
    };
  },
  methods: {
    startClock() {
      this.timer = setInterval(() => {
        this.now_timestamp += 1000;
      }, 1000);
    },
    stopClock() {
      clearInterval(this.timer);
    },
    handlerSwitchClick() {
      this.playing = !this.playing;
      if (this.playing) {
        this.startClock();
      } else {
        this.stopClock();
      }
    },
    handlerConfigClick() {},
  },
  computed: {
    time() {
      return formatTime(this.target_timestamp - this.now_timestamp);
    },
    allowStop() {
      return true;
    },
  },
};
</script>

<style scoped>
.operate {
  position: absolute;
  bottom: 152rpx;
  width: 100%;
}
.button {
  width: 80%;
  margin-top: 32rpx;
}
.container {
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.container > .main {
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.container > .main > .time {
  font-size: 128rpx;
  font-weight: 400;
  margin-top: 128rpx;
}
</style>